<template>
	<view class="parent">
		<view class="top">
			<image :src="getImageUrl('ic_title_back.png')" style="width: 40rpx;" mode="widthFix"  @click="toBack"></image>
			<image :src="getImageUrl('ic_title_more.png')" style="width: 40rpx;" mode="widthFix" @click="toUserEdit" v-if="isSelf"></image>
		</view>

		<scroll-view scroll-y="true" class="scroll">
			<swiper class="banner" circular autoplay="true" indicator-dots="true">
				<swiper-item v-for="(item, index) in banners" :key="index" @click="onPerviewImage(index)">
					<image style="width: 100%; height: 100%;" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>

			<view class="scroll-content">
				<view class="nick-view">
					<view class="nick">{{user.nick}}</view>
					<view class="sex-girl" v-if="2==user.sex">
						<image :src="getImageUrl('ic_sex_girl_white.png')" style="width: 22rpx;" mode="widthFix"></image>
						<view>{{user.age}}</view>
					</view>
					<view class="sex-boy" v-if="1==user.sex">
						<image :src="getImageUrl('ic_sex_boy_white.png')" style="width: 22rpx;" mode="widthFix"></image>
						<view>{{user.age}}</view>
					</view>
					<image v-if="0==user.onlinestatus" mode="heightFix"
						style="height: 35rpx; margin-left: 10rpx;" :src="getImageUrl('ic_online.png')">
						</image>
				</view>
				<view class="auth-view">
					<text class="label-big">认证信息</text>
					<view class="auth-content">
						<view class="auth-image">
							<image :src="getImageUrl('info_phone.png')"></image>
							<text>手机已认证</text>
						</view>
						<view class="auth-image" v-if="1==user.isReal">
							<image :src="getImageUrl('info_sm.png')"></image>
							<text>实名已认证</text>
						</view>
						<view class="auth-image" v-if="1==user.isReal">
							<image :src="getImageUrl('info_zr.png')"></image>
							<text>真人已认证</text>
						</view>
					</view>
					<lq-line></lq-line>
				</view>

				<view class="info-view">
					<text class="label-big">个人资料</text>
					<view class="info-item">
						<view class="info-item-item">
							<text class="item-label">性别</text>
							<text class="item-text">{{user.sex == 2? '女': '男'}}</text>
						</view>
						<view class="info-item-item">
							<text class="item-label">年龄</text>
							<text class="item-text">{{user.age}}岁</text>
						</view>
					</view>
					<view class="info-item">
						<view class="info-item-item">
							<text class="item-label">城市</text>
							<text class="item-text">{{getCity()}}</text>
						</view>
						<view class="info-item-item">
							<text class="item-label">职业</text>
							<text class="item-text">{{user.zhiyename || '保密'}}</text>
						</view>
					</view>
					<view class="info-item">
						<view class="info-item-item">
							<text class="item-label">身高</text>
							<text class="item-text">{{user.shengao || '保密'}}</text>
						</view>
						<view class="info-item-item">
							<text class="item-label">体重</text>
							<text class="item-text">{{user.tizhong || '保密'}}</text>
						</view>
					</view>
					<view class="info-item">
						<view class="info-item-item">
							<text class="item-label">学历</text>
							<text class="item-text">{{user.eduStatusRu || '保密'}}</text>
						</view>
						<view class="info-item-item">
							<text class="item-label">年收入</text>
							<text class="item-text">{{user.nianshouru || '保密'}}</text>
						</view>
					</view>
					<lq-line></lq-line>
				</view>

				<view class="sign-view">
					<text class="label-big">我想说的话</text>
					<text class="sign">{{user.mysign || '我很懒，什么都没有留下！'}}</text>
					<lq-line></lq-line>
				</view>

				<view class="tag-view">
					<text class="label-big">我的标签</text>
					<view style="display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;">
						<view v-for="(item, index) in tagList" class="tag" :class="[randomTag()]">{{item}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="vipPopup"  type="bottom">
			<view class="popup-vip">
				<image class="avatar" :src="user.pic"></image>
				<view class="title">解锁微信 </view>
				<view class="btn" @click="toVip">开通会员，点击复制  </view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import constant from '@/common/constant.js';
	export default {
		data() {
			return {
				online: uni.$online,
				userId: '',
				txCode: '',
				user: {},
				isSelf: false,
				realStatus: false,
				tagList: [],
				banners: [],
				dynamicImages: [],
				tagColor: ['tag-blue', 'tag-green', 'tag-yellow', 'tag-pink'],
				sex:'',
				city:'',
				sameCity: false,
			}
		},
		onLoad(option) {
			if (option) {
				this.userId = option.txCode;
				if(option.sameCity){
					this.sameCity = option.sameCity;
				}
				this.getUser();
			}
			this.sex = uni.getStorageSync('userSex');
			this.city = uni.getStorageSync('city');
		},
		methods: {
			getCity(){
				console.log("this.sameCity: " + JSON.stringify(this.sameCity));
				let city = '保密'
				if(this.sameCity=='true' ){
					console.log("this.sameCity: " + JSON.stringify(222222));
					if(uni.getStorageSync('city')){
						city = uni.getStorageSync('city')
					}
				}else{
					console.log("this.sameCity: " + JSON.stringify(111111111111));
					if(this.user.address){
						city = this.user.address
					}
				}
				return city
			},
			async getUser() {
				let res = await this.$common.post('/app/user/lookTinfo', {userid: this.userId});
				if (0 == res.code) {
					this.user = res.data;
					this.isSelf = this.user.id == uni.getStorageSync('userId');
					this.tagList = this.user.biaoqianList;
					if (this.user.xingxiang) {
						let xingxiang = this.user.xingxiang;
						if (xingxiang.charAt(xingxiang.length - 1) === ',') {
							xingxiang = xingxiang.slice(0, -1);
						}
						this.banners = xingxiang.split(',');
					} else {
						this.banners.push(this.user.pic);
					}
					//动态
					this.requestDynamic(this.userId)
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async requestDynamic(userId) {
				const params = {
					pageno: 1,
					userid: userId
				}
				let res = await this.$common.post("/app/user/getTdongtai", params);
				if (0 == res.code) {
					res.data.forEach(item => {
						if (item.imageList.length > 0) {
							item.imageList.forEach(item => {
								this.dynamicImages.push(item);
							});
						}
					});
				} else {
					uni.showToast({
						title:res.msg, icon:'none'
					})
				}
			},
			toBack() {
				uni.navigateBack();
			},
			toUserEdit() {
				uni.navigateTo({
					url: '/pages/main/user/edit/edit?userId=' + this.user.id
				})
			},
			toPersonDynamic() {
				uni.navigateTo({
					url: '/pages/main/dynamic/person/person?userId=' + this.user.id,
					fail: (error) => {
						uni.showToast({
							title: JSON.stringify(error),
							icon: 'none'
						});
					}
				});
			},
			onPreviewImage(list, index) {
				uni.previewImage({
					urls: list,
					current: index,
					fail: (error) => {
						console.log("error: " + JSON.stringify(error));
					}
				})
			},

			randomTag() {
				let index = Math.floor(Math.random() * 4)
				return this.tagColor[index]
			},
			lookWx(){
				if(uni.getStorageSync('vip')){
					if(this.user.weChatNum){
						this.$common.showToast("已复制");
						this.exeCommandCopyText(this.user.weChatNum)
					}else{
						this.$common.showToast('未填写')
					}
				}else{
					this.$refs.vipPopup.open()
				}
			},
			toVip(){
				uni.navigateTo({
					url:'/main/mine/vip/vip',
				})
				this.$refs.vipPopup.close()
			},
			onPerviewImage(index){
				uni.previewImage({
					urls: this.banners,
					current: index,
				});
			},
			exeCommandCopyText(text) {
			         uni.setClipboardData({
			                data: String(text), // 必须字符串
			                success: function () {
			                    console.log('success');
			                }
			            });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.parent {
		display: flex;
		flex-direction: column;
		height: 100vh;
		box-sizing: border-box;

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.top {
			position: fixed;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			z-index: 99;
			top: var(--status-bar-height);
			width: 100vw;
			box-sizing: border-box;
			height: 80rpx;
			padding: 0 20rpx;
		}


		.scroll {
			flex: 1;
			display: flex;
			flex-direction: column;
			position: relative;

			.banner {
				width: 100%;
				height: 700rpx;
			}

			.scroll-content {
				flex: 1;
				width: 100%;
				box-sizing: border-box;
				background-color: rgba(#000, 0.9);
				border-radius: 30rpx 30rpx 0 0;
				padding: 0 30rpx;
				position: absolute;
				top: 685rpx;

				.label-big {
					font-size: 30rpx;
					font-weight: bold;
					color: #888;
				}

				.nick-view {
					display: flex;
					flex-direction: row;
					margin-top: 30rpx;
					box-sizing: border-box;
					align-items: center;

					.nick {
						font-size: 36rpx;
						color: #fff;
						font-weight: bold;
					}

					.sex-girl {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						background-color: #fa6adc;
						border-radius: 100rpx;
						padding: 0 10rpx;
						height: 35rpx;
						margin-left: 20rpx;
						font-size: 20rpx;
						color: #fff
					}

					.sex-boy {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						background-color: #007AFF;
						border-radius: 100rpx;
						padding: 0 10rpx;
						height: 35rpx;
						margin-left: 20rpx;
						font-size: 20rpx;
						color: #fff
					}
				}

				.dynamic-view {
					margin-top: 30rpx;
					display: flex;
					flex-direction: column;

					scroll-view {
						white-space: nowrap;
						width: 100%;
						height: 120rpx;
						margin-top: 15rpx;
						box-sizing: border-box;
						margin-bottom: 30rpx;

						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 15rpx;
							margin-right: 15rpx;
						}
					}
				}

				.auth-view {
					margin-top: 30rpx;
					display: flex;
					flex-direction: column;
					font-size: 22rpx;
					color: #555;

					.auth-content {
						display: flex;
						flex-direction: row;

						.auth-image {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-right: 15rpx;
							padding: 30rpx;
						}
					}

					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						margin-bottom: 20rpx;
					}
				}


				.info-view {
					display: flex;
					flex-direction: column;
					margin-top: 30rpx;

					.info-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 24rpx;
						margin: 20rpx 0;

						.info-item-item {
							display: flex;
							flex-direction: row;
							flex: 1;

							.item-label {
								width: 150rpx;
								color: #888;
							}

							.item-text {
								flex: 1;
								color: #555;
							}
						}
					}
				}

				.sign-view {
					display: flex;
					flex-direction: column;
					margin-top: 30rpx;

					.sign {
						font-size: 24rpx;
						color: #555;
						margin: 15rpx 0;
					}
				}

				.tag-view {
					margin: 30rpx 0;

					.tag {
						margin: 10rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						padding: 0 20rpx;
						font-size: 18rpx;
						border-radius: 30rpx;
					}

					.tag-blue {
						background-color: #dbeaff;
						color: #5999e3;
					}

					.tag-green {
						background-color: #d9f6f2;
						color: #2ac2a9;
					}

					.tag-yellow {
						background-color: #feecd4;
						color: #d4a972;
					}

					.tag-pink {
						background-color: #ffe4e9;
						color: #da6377;
					}
				}
			}
		}

		.bottom {
			// position: fixed;
			// bottom: 0;
			// right: 0;
			// left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100wh;
			height: 100rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 0 30rpx;

			.message {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				background-image: linear-gradient(to right, #9fe9ff, #ae5eff);
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				line-height: 80rpx;
			}
			
			.wx{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background-color: #0bc852;
				margin-left: 30rpx;
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.video {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #333;
				font-size: 22rpx;
			}

		}
	}
	
	.popup-vip{
				width: 100wh;
				height: 500rpx;
				background-color: #282828;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 50rpx;
				
				.avatar{
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					margin-top: 50rpx;
				}
				
				.title{
					margin-top: 50rpx;
					font-size: 36rpx;
					color: #f6f6f6;
				}
				
				.btn{
					margin-top: 50rpx;
					font-size: 36rpx;
					color: #f6f6f6;
					background-color: #eaa268;
					border-radius: 50rpx;
					height: 100rpx;
					line-height: 100rpx;
					width: 100%;
					text-align: center;
				}
			}
		
	
</style>